.main-nav {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
    height: 100%;

    li {
        a {
            cursor: pointer;
            padding: 10px 16px;
            border-radius: 4px;
        }

        .fa {
            margin-right: 10px;
        }

        &.link-active a,
        &.link-active a:hover,
        &.link-active a:focus {
            background-color: #4189C7;
            color: white;
        }
    }
}

@media (min-width: 768px) {
  .main-nav {
    width: calc(~"25% - 30px");
    min-width: 180px;

    .navbar {
      border-radius: 0 15px 15px 0;
      border-width: 0px;
      height: 100%;
      vertical-align:top;

      a {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      ul {
        float: none;
      }

      li {
        float: none;
        font-size: 15px;
        margin: 6px;

        a {
          padding: 10px 16px;
          border-radius: 4px;
        }
      }
    }

    .navbar-header {
      float: none;
    }
  }
}
